import { CqkjMap } from "../Basic/CqkjMap";
import { MapElement, MapElementOption } from "../Basic/MapElement";


export class CoordinateIndication extends MapElement<MapElementOption>{
  dom: HTMLDivElement;
  get show(): boolean {
    return this.option.show
  }
  set show(val: boolean) {
    if(this.option.show!=val){
      this.option.show!=val
      this.dom.style.display=val?'':'none'
      val&&this.onMouseMove()
    }
  }
 
  constructor(map:CqkjMap,option:Partial<MapElementOption>={}){
    super(map,Object.assign({
      name:'坐标指示器',
      show:true
    },option))
    this.dom=createDom()
    map.dom.appendChild(this.dom)
    map.show&&this.onMouseMove()
  }

  onMouseMove(){
    const {x,y,z} = this.map.mouseHandler.location;
    this.dom.innerHTML = `${x.toFixed(2)}°E;${y.toFixed(
      2
    )}°N;${z.toFixed(2)}M`;
  }

  onDestroy(): void {
    this.dom.remove()
  }
}

function createDom(){
  const dom=document.createElement('div')
  dom.style.position='absolute'
  dom.style.zIndex='100'
  dom.style.bottom='20px'
  dom.style.left='20px'
  dom.style.color='antiquewhite'
  return dom
}